<template>
  <span v-if="props.classify" style="display: inline-block;border:1px dotted red;border-radius:3px;color:red;padding:0px 2px;margin:0px 4px;font-size:10px;text-align:center;height:12px;line-height:12px;overflow:hidden;">
     <template v-if="!props.short">{{classifyItem.name}}</template>

     <a-tooltip v-if="props.short" color="blue">
        <template #title>{{classifyItem.name}}</template>
        {{classifyItem.shortName}}
    </a-tooltip>


    <!-- <a-tooltip placement="top" >
        <template #title>
          {{classifyItem.name}}
        </template>
        {{classifyItem.name}}
      </a-tooltip> -->


  </span>
</template>
<script setup>
import { ref,onMounted ,watch} from 'vue'

import CONSTANTS from '@/constants/Constants.js'



const props = defineProps({
  classify: {
    type: String,
    default:null,
  },
  short:{
    type:Boolean,
    default:false
  }
})


const classifyItem = ref({})
function changeItem(c){
    if( CONSTANTS.itemClassify.PROCESS_GROUP === c){
        classifyItem.value = {name:"过程组",shortName:"PG"}
    }
    if( CONSTANTS.itemClassify.KNOWLEDGE_AREA === c){
        classifyItem.value = {name:"知识领域",shortName:"KA"}
    }
    if( CONSTANTS.itemClassify.PROCESS === c){
        classifyItem.value = {name:"基础过程",shortName:"P"}
    }
    if( CONSTANTS.itemClassify.TECH_TOOL === c){
        classifyItem.value = {name:"技术工具",shortName:"TT"}
    }
    if( CONSTANTS.itemClassify.IO === c){
        classifyItem.value = {name:"输入/输出",shortName:"IO"}
    }
    if( CONSTANTS.itemClassify.SUB === c){
        classifyItem.value = {name:"小词板",shortName:"RE"}
    }
    if( CONSTANTS.itemClassify.PERFORMANCE_DOMAIN === c){
        classifyItem.value = {name:"绩效域",shortName:"PD"}
    }
}


onMounted( function(){
    changeItem(props.classify)
})


watch(() => props.classify, (newValue, oldValue) => {
    changeItem(newValue)
})


</script>
<style scoped></style>
